const path = require('path');
const process = require('process');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const ENV = process.env.NODE_ENV;

const config = {
	entry: {
		main: './src/main.tsx',
	},
	output: {
		filename: '[name].bundle.js',
		path: path.resolve(__dirname, 'build'),
		clean: true
	},
	target: "web",
	devServer: {
		contentBase: './build',
		inline: true,
		hot: true,
		compress: true,
	},
	resolve: {
		alias: {
			'@': path.resolve(__dirname, 'src')
		},
		extensions: ['.ts', '.tsx', '.js', '.jsx', '.json']
	},
	module: {
		rules: [{
			test: /\.(js|jsx|ts|tsx)$/i,
			exclude: /node_modules/,
			loader: 'babel-loader',
			options: {
				cacheDirectory: true,
				cacheCompression: false
			}
		}]
	},
	plugins: [
		new HtmlWebpackPlugin({
			template: './public/index.html',
			favicon: './public/favicon.ico'
		}),
		new webpack.ProvidePlugin({
			process: 'process/browser',
		}),
	],
	optimization: {
		splitChunks: {
			chunks: 'all',
		},
	},
}

module.exports = () => {
	if (ENV === 'development') {
		config.mode = 'development';
		config.devtool = 'inline-source-map';
	}
	if (ENV === 'production') {
		config.mode = 'production';
		config.devtool = 'eval';
	}
	return config;
}
